<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="审计规则"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    >
    <template v-slot:namebottom>
      <el-select style="width: 267px;margin-top: 20px;" v-model="exampleName" placeholder="请选择实例">
        <el-option
          v-for="item in options22"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    <template v-slot:tabs>
      <pageTabs :tabslist="tabslist" isValue="scope" @active="val=>$emit('active',val)"></pageTabs>
    </template>
    </listPage>
    <!-- 添加审计范围弹窗 -->
    <pdlog v-model="showEdit" width="558px" title="添加审计范围" @comfirm="showEdit = false" @cencel="showEdit = false">
      <div class="edit-dialog">
        <div class="name">名称</div>
        <el-input class="w233" size="small" v-model="field1"  placeholder="请输入"></el-input>
      </div>
      <div class="edit-dialog">
        <div class="name">数据库名称</div>
        <el-select  size="small"  class="w233" v-model="field2" placeholder="请选择数据库名称">
          <el-option label="db03" value="db03"></el-option>
          <el-option label="rds002" value="rds002"></el-option>
        </el-select>
      </div>
      <div class="edit-dialog">
        <div class="name">操作类型</div>
        <el-radio-group v-model="field3">
          <el-radio :label="1">登录</el-radio>
          <el-radio :label="2">操作</el-radio>
        </el-radio-group>
      </div>
      <div class="edit-dialog">
        <div class="name">数据库账号</div>
        <el-input class="w233" size="small" v-model="field4" placeholder="请输入"></el-input>
      </div>
      <div class="edit-dialog">
        <div class="name">例外IP</div>
        <el-input size="small" type="textarea"
  :autosize="{ minRows: 3}" v-model="field5" placeholder="请输入IP/IP段，多个以换行符相隔，不可重复（默认全审计）"></el-input>
      </div>
      <div class="edit-dialog">
        <div class="name">源IP</div>
        <el-input size="small" type="textarea"
  :autosize="{ minRows: 3}" v-model="field6" placeholder="请输入IP/IP段，多个以换行符相隔，不可重复（默认全审计）"></el-input>
      </div>
      <div class="edit-dialog">
        <div class="name">源端口</div>
        <el-input class="w233" size="small" v-model="field7" placeholder="请输入"></el-input>
      </div>
    </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getDbAuditsrule} from '@/api/pageList'
  import mix from './mixins.js'
  export default {
    mixins:[mix],
    components: {
      listPage
    },
    data() {
      return {
        field1:'',
        field2:'',
        field3:1,
        field4:'',
        field5:'',
        field6:'',
        field7:'',
        exampleName:'',
        tipName:'',
        showTip:false,
        addBtnList:[],
        btnList:[
          {
            id:1,
            name:'添加审计范围',
            handle:this.handleEdit
          },
          {
            id:2,
            name:'启用',
            handle:()=>this.handleClick('启用')
          },
          {
            id:3,
            name:'禁用',
            handle:()=>this.handleClick('禁用')
          },
          {
            id:4,
            name:'删除',
            handle:()=>this.handleClick('删除')
          },
        ],
        options: [
          
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "id",
            label: "序号",
          },
          {
            field: "name",
            label: "名称",
          },
          {
            field: "exc_ip",
            label: "SQL命令特征",
          },
          {
            field: "source_ip",
            label: "例外IP",
          },
          {
            field: "source_port",
            label: "源端口",
          },
          {
            field: "db_name",
            label: "数据库名称",
          },
          {
            field: "db_account",
            label: "数据库账号",
          },
          {
            field: "status",
            label: "状态",
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            btnlist: [{
                name: '编辑',
                handle: this.handleEdit
              },
            ]
          },
        ],
        tableData: [],
      }
    },

    created() {
      this.init()
    },
    methods: {
      handleAddPhysical(){
        console.log('申请物理机')
      },
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        // console.log('~~~~~~~~~',params)
        // 请求
        getDbAuditsrule()
          .then(res => {
            if(res.code==200){
              let data = JSON.parse(res.data)
              this.tableData = data
              console.log('~~~~~~',this.tableData);
            }
          })
      },
      handleAdd() {
        console.log('跳转新增页');
        // this.$router.push({
        //   path: '/physical/physicalMachineAdd'
        // })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    align-items: center;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
      min-width: 80px;
    }
    .el-input {
      width: 233px;
    }
  }

</style>
